<template>
	<view class="content">
		<!-- F1: 状态栏 -->
		<myStatusbar />
		<!-- F2: 自定义导航栏 -->
		<uni-nav-bar
			title="缴费"
			leftIcon="back"
			leftText="返回"
			rightIcon="list"
			backgroundColor="#090"
			color="#FFF"
			@clickLeft="goBack"
		/>
		<!-- F3: 输入缴费金额 -->
		<uni-list class="list-amount">
			<uni-list-item
				:title="type | feeType"
				:thumb="type | feeTypeIcon"
				thumbSize="lg"
			>
				<template v-slot:footer>
					<view class="footer-amount">
						<input type="digit" placeholder="请输入缴费金额" />
						<text>元</text>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- F4: 缴费详情 -->
		<uni-list class="list-detail">
			<!-- clickable 是否开启点击点击事件 
				点击后，打开弹出层
			-->
			<!-- 如果存在缴费单位，就显示选中的单位名称；否则不存在缴费单位，显示加载中 -->
			<uni-list-item
				title="缴费单位"
				:rightText="collectors.length===0 ? '加载中' : collectors[curCollector].cname"
				:showArrow="true"
				:clickable="true"
				@click="$refs.popup.open()"
			></uni-list-item>
			<uni-list-item
				title="用户编号"
			>
				<template v-slot:footer>
					<!-- input 监听用户输入事件 -->
					<input class="user-id" type="text" placeholder="请输入缴费编号" @input="userChange" />
				</template>
			</uni-list-item>
			<uni-list-item
				title="户名"
				:rightText="householdName"
			></uni-list-item>
			<uni-list-item
				title="用户地址"
				:rightText="householdAddr"
			></uni-list-item>
		</uni-list>
		<!-- F5: 提交按钮 -->
		<view class="submit">
			<text class="btn">提交</text>
		</view>
		<!-- F6: 弹出层 -->
		<!-- ref  用于给弹出层起名字 -->
		<!-- is-mask-click  是否开启点击蒙版关闭 -->
		<uni-popup 
			ref="popup"
			:is-mask-click="false"
		>
			<view class="popup-container">
				<view class="popup-header">
					<text>缴费单位</text>
				</view>
				<view class="popup-body">
					<radio-group 
						class="radio-group"
						@change="handleChange"
					>
						<label class="radio-item" v-for="(item,index) in collectors" :key="item.cid">
							<text>{{item.cname}}</text>
							<radio 
								:value="String(index)" 
								:checked="index==curCollector"
							/>
						</label>
					</radio-group>
				</view>
				<view class="popup-footer">
					<button @click="$refs.popup.close()">取消</button>
					<button @click="chooseCollector">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { feeCollectorList, householdQuery } from '../../service'
	export default {
		data() {
			return {
				type: 0, //保存传递的缴费类型
				collectors: [], //保存缴费单位
				tmpCollector: 0, // 暂时选中的缴费单位（下标）
				curCollector: 0, // 最终选中的缴费单位（下标）
				hhid: '', //保存业主缴费编号
				timer: null, // 保存开启的定时器
				householdName: '', // 保存业主姓名
				householdAddr: ''  // 保存业主地址
			}
		},
		async onLoad({type}) {
			console.log(type)
			// 保存传递类型到数据中
			this.type = type
			// 请求缴费单位列表
			const data = await feeCollectorList(type)
			console.log(data)
			this.collectors = data
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			handleChange(event) {
				// 获取单选框中的value值(下标)
				console.log(event.detail.value)
				// 把下标保存
				this.tmpCollector = event.detail.value
			},
			chooseCollector() {
				// 把临时选中项作为最终选中项
				this.curCollector = this.tmpCollector
				// 关闭弹出层
				this.$refs.popup.close()
			},
			async userChange(event) {
				// 获取输入的值（缴费编号）
				// console.log(event.detail.value)
				// 用户点击之前判断是否已经开启了定时器，如果已经有定时器，需要先清除
				if(this.timer){
					clearTimeout(this.timer)
				}
				// 用户只要向服务器发起请求，通过定时器规定1000毫秒再去发请求
				this.timer = setTimeout(async ()=>{
					const data = await householdQuery(event.detail.value)
					console.log(data)
					// 判断是否成功,查询成功，回显业主信息
					if(data.code===200) {
						this.householdName = data.rows[0].householdName
						this.householdAddr = data.rows[0].householdAddr
					} else {
						// 弹出吐司对话框
						uni.showToast({
							title: '业主编号错误',
							icon: 'none',
							duration: 3000
						})
						// 清空业主姓名和地址
						this.householdName = ''
						this.householdAddr = ''
					}
					
					
					// 定时器变量回到原位
					this.timer = null
				}, 1000)
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-navbar {
		display: block;
		// ::v-deep 样式穿透
		::v-deep .uni-navbar__content {
			display: block;
		}
	}
	.list-amount{
		margin-top: $uni-spacing-col-base;
		.footer-amount {
			align-items: center;
			input {
				font-size: $uni-font-size-base;
				text-align: right;
				margin-right: $uni-spacing-row-base;
			}
		}
	}
	
	.list-detail {
		margin-top: $uni-spacing-col-base;
		.user-id {
			text-align: right;
			font-size: $uni-font-size-sm;
		}
	}
	.submit {
		margin: $uni-spacing-col-lg*3 $uni-spacing-row-lg;
		.btn {
			width: 100%;
			background-color: $zh-theme-color;
			color: $zh-theme-color-inverse;
			padding: $uni-spacing-col-base 0;
			text-align: center;
			border-radius: $uni-border-radius-base;
		}
	}
	// 弹出层
	.popup-container {
		width: 600rpx;
		background-color: $uni-bg-color;
		flex-direction: column;
		.popup-header {
			background-color: $zh-theme-color;
			color: $zh-theme-color-inverse;
			justify-content: center;
			padding: $uni-spacing-col-base 0;
			font-size: $uni-font-size-lg;
		}
		.popup-body {
			padding: $uni-spacing-col-base;
			.radio-group {
				display: flex;
				flex-direction: column;
				width: 100%;
				.radio-item {
					display: flex;
					flex-direction: row;
					width: 100%;
					justify-content: space-between;
					padding: $uni-spacing-col-base 0;
					border-bottom: $uni-border;
					text {
						font-size: $uni-font-size-base;
					}
				}
			}
			
		}
		.popup-footer {
			padding: $uni-spacing-col-base 0;
			button {
				font-size: $uni-font-size-base;
				background-color: $zh-theme-grey-light;
				color: $zh-theme-color-inverse;
			}
		}
	}
	
</style>
